<template>
  <el-dialog :title="currentBtn.name" :append-to-body="true" v-if="dialogVisible" :visible.sync="dialogVisible"
  width="480px">
   <template v-if="step === 1 && currentBtn.backType === 'choose'">
    <el-form :model="backForm" ref="backForm" :rules="rules1">
      <el-form-item prop="toActivity" label="节点">
      <el-select v-model="backForm.toActivity" value-key="id" placeholder="请选择" class="width-full">
      <el-option v-for="item in currentBtn.backActivities" :key="item.id" :label="item.name" :value="item">
      </el-option>
    </el-select>
    </el-form-item>
    </el-form>
  </template>
  <template v-if="step === 2">
    <div v-if="currentBtn.chatText">{{currentBtn.chatText}}</div>
    <template v-if="currentBtn.remarkType !== 2">
    <el-form :model="formRemark" :rules="currentBtn.remarkType === 0 ? rules : []" ref="formRemark">
      <el-form-item
      prop="remarkText"
      label="备注">
      <el-input v-model="formRemark.remarkText" type="textarea" @blur="changeRemark"></el-input>
    </el-form-item>
    </el-form>
    </template>
  </template>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitBack" v-if="step === 1">回退</el-button>
    <el-button type="primary" @click="submit" v-else>确 定</el-button>
  </span>
</el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Ref, Prop } from 'vue-property-decorator'
import optionalScope from '../../config/serviceConfig/components/optionalScope.vue'
@Component({
  name: 'Assign',
  components: {
    optionalScope
  }
})
export default class OperBtnDialog extends Vue {
  [x: string]: any
  @Prop(Object) public currentBtn!: any
  @Prop(Array) public tabs!: any
  private formRemark = {
    remarkText: ''
  }

  private step = 1

  private backForm: any = {
    toActivity: ''
  }

  private validateActive = (rule, value, callback) => {
    console.log(value)
    if (!value) {
      callback(new Error('请选择节点'))
    } else {
      callback()
    }
  }

  private validateRemark = (rule, value, callback) => {
    console.log(value)
    if (!value) {
      callback(new Error('请填写备注'))
    } else {
      callback()
    }
  }

  public rules = {
    remarkText: [{ required: true, message: '请输入备注', validator: this.validateRemark, trigger: 'blur' }]
  };

  public rules1 = {
    toActivity: [{ required: true, message: '请选择节点', validator: this.validateActive, trigger: 'change' }]
  };

  private changeRemark () {
    (this.$refs as any).formRemark.validate()
  }

  private submitBack () {
    (this.$refs as any).backForm.validate((valid) => {
      if (valid) {
        if (this.currentBtn.popChat) {
          this.formRemark.remarkText = ''
          this.step = 2
        } else {
          this.dialogVisible = false
          this.$emit('handleBack', Object.assign({}, { remark: this.formRemark.remarkText }, this.backForm))
        }
      } else {
        return false;
      }
    });
  }

  private dialogVisible = false
  public open () {
    this.formRemark = {
      remarkText: ''
    }
    this.backForm.toActivity = ''
    this.dialogVisible = true;
    this.$nextTick(() => {
      if (this.currentBtn.backType === 'choose') {
        this.step = 1
      } else {
        this.step = 2
      }
    })
  }

  public close () {
    this.dialogVisible = false;
  }

  private submit () {
    if ((this.$refs as any).formRemark) {
      (this.$refs as any).formRemark.validate((valid) => {
        if (valid) {
          this.dialogVisible = false
          this.$emit('handleBack', Object.assign({}, { remark: this.formRemark.remarkText }, this.backForm))
        } else {
          return false;
        }
      });
    } else {
      this.dialogVisible = false
      this.$emit('handleBack', Object.assign({}, { remark: this.formRemark.remarkText }, this.backForm))
    }
  }
}
</script>
<style lang="stylus" scoped>
</style>
